<template>
	<view>
		<view class="container u-skeleton">
			<view class="userinfo">
				<block>
					<!--u-skeleton-circle 绘制圆形-->
					<image class="userinfo-avatar u-skeleton-circle" :src="userInfo.avatarUrl"></image>
					<!--u-skeleton-fillet 绘制圆角矩形-->
					<text class="u-skeleton-fillet">{{userInfo.nickName}}</text>
				</block>
			</view>
			<view style="margin: 20px 0">
				<view v-for="(item,index) in lists" :key="index" class="lists">
					<!--u-skeleton-rect 绘制矩形-->
					<text class="u-skeleton-rect">{{item}}</text>
				</view>
			</view>
		</view>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
				<view class="page-body">
					<view class="page-section page-section-gap">
						<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
						</map>
					</view>
				</view>
	</view>
			
</template>

<script>
	export default {
		data() {
			return {
				// 随意填充一些模拟数据，以撑开元素，供骨架组件查询和模拟块状数据
				userInfo: {
					nickName: '关于本app'
				},
				id:0, // 使用 marker点击事件 需要填写id
							title: 'map',
							latitude: 31.6781,
							longitude: 119.954607,
							covers: [{
								latitude: 31.678,
								longitude: 119.954607,
								iconPath: '../../../static/location.png'
							}, {
								latitude: 31.70,
								longitude: 119.95,
								iconPath: '../../../static/location.png'
							}],
				
				
				lists: [
					'数十年智能交通管理系统的发展依然存在效能不足的问题。该文聚焦城市交通系统的社会技术属性和特征，对智能交通管理系统的发展方向进行了探索。',
					'提出了智能交通管理系统发展的三大趋势：在技术基础上应以信息物理社会系统为基础，在建设目标上要实现能力的本质提升',
					'在管理机制上要实现数据支撑的综合驱动,在分析信息域、物理域、社会域三者之间关系的基础上，提出了基于信息物理社会系统的智能交通管理系统体系框架。',
					'阐述了三大趋势的具体内涵及未来发展的建议，以期对我国智能交通管理系统的发展提供借鉴。',
				],
				loading: true, // 是否显示骨架屏组件
			}
		},
		methods:{
			
		},
		onLoad() {
			// 通过延时模拟向后端请求数据，调隐藏骨架屏
			setTimeout(() => {
				this.loading = false;
			}, 2000)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 60rpx;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userinfo-avatar {
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 50%;
	}

	.lists {
		margin: 10px 0;
	}
</style>